<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: 任静
 * @Date: 2020-11-11 16:28:36
 * @LastEditors: 任静
 * @LastEditTime: 2020-11-13 21:32:03
-->
<template>
  <div class="home">
    <header>
      <van-search v-model="value" placeholder="请输入搜索关键词" @click="goSearch" />
      <!-- tab头部 -->
      <van-tabs v-model="active" @click="tabchange" swipeable>
        <van-tab
          :title="item.name"
          v-for="item in homeList"
          :key="item.id"
          :name="item.id"
        ></van-tab>
      </van-tabs>
    </header>
    <main>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item">
          <img :src="item.image" alt=""
        /></van-swipe-item>
      </van-swipe>

      <!-- tab切换列表 -->
      <div class="list">
        <dl v-for="item in classiflyList" :key="item.id">
          <dt><img :src="item.image" alt="" @click="toDetail(item)" /></dt>
          <dd>{{ item.name }}</dd>
        </dl>
      </div>

      <!-- tab切换视频 -->
      <div class="articleList">
        <dl v-for="item in articleList" :key="item.id">
          <dt>
            <!-- <img :src="item.image" alt="" /> -->
            <!-- <van-image
              width="175px"
              height="160px"
              fit="cover"1`
              :src="item.image"
            /> -->
            <video style="width:98%;height:100%" controls :poster="item.image" object-fit:fill>
              <source :src="item.video" />
            </video>
          </dt>
          <dd><p>{{ item.title }}</p>
            <p>
              <span>
                <img :src="item.avatar" alt="" style="width:20px;height:20px;border-radius:50%;" /> {{ item.nickname }}
              </span>
              <span>推荐值: {{ item.score }} </span>
            </p></dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
import { defineComponent, computed, ref } from "vue";
import { useStore } from "vuex";
import { Swipe, SwipeItem } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    let active = ref(0);
    let value = ref("");
    let store = useStore();
    let router = useRouter();
    store.dispatch("home/getHomeList", { mid: 0 });
    store.dispatch("home/getHomeBanner", { mid: 0, rcid: 0 });
    store.dispatch("home/getHomeArticle", { mid: 0, rankCategoryId: 0 });
    store.dispatch("classifly/getClassiflyList", { mid: 0, rankCategoryId: 0 });
    function tabchange(name) {
      store.dispatch("classifly/getClassiflyList", {
        mid: 0,
        rankCategoryId: name,
      });
      // store.dispatch("home/getHomeBanner", { mid: 0, rcid: name });
      store.dispatch("home/getHomeArticle", { mid: 0, rankCategoryId: name });
    }
    //跳转详情页
    function toDetail(item) {
      let id = item.id;
      router.push({ path: "/detail", query: { id } });
    }
    //跳转搜索页面
    function goSearch(){
      router.push('/search')
    }
    return {
      homeList: computed(() => store.state.home.homeList),
      bannerList: computed(() => store.state.home.bannerList),
      articleList: computed(() => store.state.home.articleList),
      classiflyList: computed(() => store.state.classifly.classiflyList),
      tabchange,
      toDetail,
      goSearch
    };
  },
});
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .nav {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: scroll;
    span {
      display: inline-block;
      width: 80px;
    }
  }
  main {
    flex: 1;
    overflow: scroll;
    width: 100%;
    .my-swipe {
      width: 100%;
      height: 160px;
      .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .list {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      box-sizing: border-box;
      margin-top: 10px;
      dl {
        width: 25%;
        margin-top: 10px;
        dt {
          text-align: center;

          img {
            width: 70%;
          }
        }
        dd {
          text-align: center;
        }
      }
    }
    .articleList {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      box-sizing: border-box;
      margin-top: 10px;
      padding: 8px;
      dl {
        width: 50%;
        height: 210px;
        align-content: flex-start;
        margin-top: 15px;
        dt {
          width:100%;
          height:160px;
          margin: 0 auto;
          //   .vanimage {
          //   width: 95%;s
          //   height:150px;
          // }
        }
         dd {
         
          p {
            display: flex;
            justify-content: space-between;
            line-height: 30px;;
           span{
              img {
              width: 20px;
              height: 20px;
              border-radius: 50%;
            }
           }
          }
        }
      }
    }
  }
}
</style>